<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup name="Person">
import { reactive, toRefs, toRef } from "vue";

let person = reactive({
  name: "张三",
  age: 18,
});

let { name, age } = toRefs(person); //解构赋值
let nl = toRef(person, "age"); //toRef() 用法，前面传对象，后面传要用的属性
console.log(nl.value);

//这句话相当于：let name = person.name, let age = person.age
/*person.name 和 person.age 都是响应式的
  但得到的 name 和 age 不是响应式的，他们成为了另外的两个对象
  因为 name 只是读取并赋予了 person.name 的值，自己本身不是响应式的
  在下面更改 name 和 age 时，person.name和person.age没有发生改变
  要让 name 和 age 变成响应式，需要引入 toRefs() (即多个ref)
*/

function changeName() {
  name.value += "~";
  console.log(name, person.name);
}

function changeAge() {
  age.value += 1;
}
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>